<template>
    <van-action-sheet :show="visibleArea" @close="$emit('cancel')">
        <van-area :area-list="areaList" @cancel="$emit('cancel')" @confirm="changeCity" :columns-num="2" :title="title"/>
    </van-action-sheet>
</template>
<script>
import areaList from '@/common/js/city.js';
export default {
    props: {
        visibleArea: {
            type: Boolean,
            default: false
        },
        areaList: {
            type: Array,
            default() {
                return areaList;
            }
        },
        columnsNum: {
            type: Number,
            default: 2
        },
        title: {
            type: String,
            default: "选择城市"
        }
    },
    methods: {
        changeCity(event) {
            this.$emit('changeCity', event.mp.detail);
        }
    }
}
</script>